<template>
  <div v-show="!this.isShow.isLDShow" id="music" class="music" @click="toggleMusic">
    <div class="music-bg">
      <div class="trumpet"></div>
      <div class="sound trumpet-shine" v-show="isPlay"></div>
    </div>
    <audio :src="musicURL" id="myMusic" preload="preload" loop></audio>
  </div>
</template>

<script>
export default {
  name: 'MusicPlayer',
  props: {
    isShow: {
      type: Object
    }
  },
  data () {
    return {
      musicURL: 'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/bg.mp3',
      isPlay: true
    }
  },
  mounted () {
    this.audioPlay()
  },
  methods: {
    toggleMusic () {
      if (this.isPlay) {
        this.audioPause()
      } else {
        this.audioPlay()
      }
      this.isPlay = !this.isPlay
    },
    audioPlay () {
      let audio = document.getElementById('myMusic')
      audio.play()
      document.addEventListener('WeixinJSBridgeReady', function () {
        audio.play()
      }, false)
    },
    audioPause () {
      let audio = document.getElementById('myMusic')
      audio.pause()
      document.addEventListener('WeixinJSBridgeReady', function () {
        audio.pause()
      }, false)
    }
  }
}
</script>

<style lang="less" scoped>
.music {
  position: absolute;
  right: .5rem;
  top: .5rem;
  z-index: 3;
  margin-left: 1rem;
  margin-bottom: 1rem;
  width: 1.625rem /* 26/16 */;
  height: 1.625rem /* 26/16 */;
  .music-bg {
    display: flex;
    width: 1.625rem /* 26/16 */;
    height: 1.625rem /* 26/16 */;
    background-image: url(./music_bg.png);
    background-size: 100% 100%;
    .trumpet {
      width: .75rem /* 12/16 */;
      height: .875rem /* 14/16 */;
      margin-left: .35rem;
      margin-top: .4rem;
      background-image: url(./music_trumpet.png);
      background-size: 100% 100%;
    }
    .sound {
      margin-top: .5rem;
      width: .3125rem /* 5/16 */;
      height: .6875rem /* 11/16 */;
      background-image: url('./music_sound.png');
      background-size: 100% 100%;
    }
  }
}

.trumpet-shine {
  animation: shine 2s linear infinite;
}

@keyframes shine {
  0%, 100% {
    filter: opacity(1);
  }
  50% {
    filter: opacity(0);
  }
}
</style>
